<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="author" content="Cai Heng"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <link rel="stylesheet" href="css/mystyle.css"/>
    <link rel="stylesheet" href="css/form.css"/>
    <link rel="stylesheet" href="css/swiper.min.css"/>
    <link rel="stylesheet" href="css/index.css"/>
    <title>老石汇</title>
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/swiper.jquery.min.js"></script>
    <script src="js/vue/vue.js"></script>
    <script>
        var swiper2 = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            paginationClickable: true,
            simulateTouch:false,
            autoplay: 5000,
            loop:true
        });
        $(document).ready(function() {
            new Vue({
                el:"#app",
                data:{
                    dlshow:false,
                    zcshow:false,
                    wjshow:false

                },
                methods:{
                    dl:function(){
                        $(".formBg").show();
                        this.dlshow=true;
                        this.zcshow=false;
                        this.wjshow=false;
                    },
                    zc:function(){
                        $(".formBg").show();
                        this.zcshow=true;
                        this.wjshow=false;
                        this.dlshow=false;
                    },
                    wj:function(){
                        $(".formBg").show();
                        this.wjshow=true;
                        this.dlshow=false;
                        this.zcshow=false;
                    }
                }
            });

        });
    </script>
</head>
<body>
<div id="app">
    <!--表单-->
    <div class="formBg hidden">
        <!-- 登录-->
        <form action="" class="form" v-if="dlshow">
            <div class="close-box">
                <img src="images/CLOSE.png" class="close" alt=""/>
            </div>
            <img src="images/logo.png" class="form-logo" alt=""/>
            <div class="form-div">
                <hr/>&nbsp;
                使用帐号密码登录&nbsp;
                <hr/>
            </div>
            <div class="form-div">
                <label for="user">帐号</label>
                <input type="text" id="user" name="name" placeholder="请输入帐号"/>
            </div>
            <div class="form-div">
                <label for="psd">密码啊</label>
                <input type="text" id="psd" name="psd" placeholder="请输入密码"/>
            </div>
            <div class="form-div">
                <input type="submit" id="submit" class="submit" value="登录"/>
                <span class="register">注册</span>
                <span class="forget">忘记密码</span>
            </div>
        </form>
        <!-- 注册-->
        <form action="" class="form"  v-if="zcshow">
            <div class="close-box">
                <img src="images/CLOSE.png" class="close" alt=""/>
            </div>
            <img src="images/logo.png" class="form-logo" alt=""/>
            <div class="form-div">
                <hr/>&nbsp;
                新用户注册&nbsp;
                <hr/>
            </div>
            <div class="form-div">
                <label for="tel">手机号</label>
                <input type="text" id="tel" name="tel" placeholder="请输入手机号"/>
            </div>
            <div class="form-div form-code">
                <label for="code">验证码</label>
                <input type="text" id="code" name="code" placeholder="请输入验证码"/>
                <span class="getcode">发送验证码</span>
            </div>
            <div class="form-div">
                <label for="setpsd">密码</label>
                <input type="text" id="setpsd" name="setpsd" placeholder="请设置密码"/>
            </div>
            <div class="form-div">
                <input type="submit" id="submit-reg" class="submit" value="注册"/>
                <span class="regalert"> 点击「注册」按钮，即代表你同意 <span class="var">《注册声明》 《版权声明》</span></span>
            </div>
        </form>
        <!-- 忘记密码-->
        <form action="" class="form"  v-if="wjshow">
            <div class="close-box">
                <img src="images/CLOSE.png" class="close" alt=""/>
            </div>
            <img src="images/logo.png" class="form-logo" alt=""/>
            <div class="form-div">
                <hr/>&nbsp;
                忘记密码&nbsp;
                <hr/>
            </div>
            <div class="form-div">
                <label for="tel-2">手机号</label>
                <input type="text" id="tel-2" name="tel-2" placeholder="请输入手机号"/>
            </div>
            <div class="form-div form-code">
                <label for="code-2">验证码</label>
                <input type="text" id="code-2" name="code-2" placeholder="请输入验证码"/>
                <span class="getcode">发送验证码</span>
            </div>
            <div class="form-div">
                <label for="newpsd">密码</label>
                <input type="text" id="newpsd" name="newpsd" placeholder="请输入新密码"/>
            </div>
            <div class="form-div">
                <input type="submit" id="ok" class="submit" value="确定"/>
            </div>
        </form>
    </div>
    <!--页面头部导航-->
    <header class="overflow">
        <div class="float">
            <img src="images/logo.png" alt=""/>
        </div>
        <div class="float header-rt">
            <span class="login" @click="dl">登录</span>&nbsp;&nbsp;|&nbsp;
            <span class="reg" @click="zc">注册</span>
            <span><img src="images/phone.png" alt=""/>&nbsp;手机商城</span><br/>
            <div class="search-box">
                <input type="search" class="search" placeholder="请输入关键字"/><button class="searching">搜索</button>
            </div>
        </div>
    </header>
    <nav class="overflow">
        <ul>
            <li class="float navactive">首页</li>
            <li class="float">材料供应</li>
            <li class="float bg-jt">石材加工</li>
            <li class="float bg-jt">装修设计</li>
            <li class="float bg-jt">施工团队</li>
            <li class="float">会员中心</li>
        </ul>
    </nav>
    <!--网页主体-->
    <section>
        <!--滚动图-->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="images/banner.jpg" alt=""/></div>
                <div class="swiper-slide"><img src="images/banner.jpg" alt=""/></div>
                <div class="swiper-slide"><img src="images/banner.jpg" alt=""/></div>
                <div class="swiper-slide"><img src="images/banner.jpg" alt=""/></div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
            <!-- Add Arrows -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
        <!-- 材料供应-->
        <div class="main">
            <div class="atitle">
                <h3 class="h3"><span>材料</span>&nbsp;供应</h3>
                <img class="more" src="images/more.png" alt=""/>
            </div>
            <div class="cl-lists overflow">
                <ul>
                    <li class="float"><img src="images/03.jpg" alt=""/>
                        <span class="alt">景观园林石材</span>
                    </li>
                    <li class="float margin-ct"><img src="images/02.jpg" alt=""/>
                        <span class="alt">商业空间石材</span>
                    </li>
                    <li class="float"><img src="images/01.jpg" alt=""/>
                        <span class="alt">家居场所石材</span>
                    </li>
                    <li class="float lg-img img-rt"><img src="images/05.jpg" alt=""/>
                        <span class="alt">酒店建筑石材</span>
                    </li>
                    <li class="float lg-img"><img src="images/04.jpg" alt=""/>
                        <span class="alt">办公场所石材</span>
                    </li>
                </ul>
            </div>
            <div class="overflow checkedlist">
                <ul>
                    <li class="float"><img src="images/cai6.png" alt=""/>
                        <span>咖啡网</span>
                    </li>
                    <li class="float"><img src="images/cai5.png" alt=""/>
                        <span>米白</span>
                    </li>
                    <li class="float"><img src="images/cai4.png" alt=""/>
                        <span>大花白</span>
                    </li>
                    <li class="float"><img src="images/cai3.png" alt=""/>
                        <span>灰麻</span>
                    </li>
                    <li class="float"><img src="images/cai2.png" alt=""/>
                        <span>红色</span>
                    </li>
                    <li class="float"><img src="images/cai1.png" alt=""/>
                        <span>金碧辉煌</span>
                    </li>
                </ul>
            </div>
            <!-- 装修案例-->
            <div class="atitle">
                <h3 class="h3"><span>装修</span>&nbsp;案例</h3>
                <img class="more" src="images/more.png" alt=""/>
            </div>
            <div class="overflow zhx-box">
                <div class="float">
                    <img src="images/jy2.png" alt=""/>
                    <img src="images/jy.jpg" alt=""/>
                </div>
                <div class="float zhx-text">
                    <h3>夏阳银湖320㎡ <br/>全包 <br/>—</h3>
                    <p>
                        设计理念： <br/>简欧风格对材料的质感要求不低，好的现代简欧风格设计在配饰方面要求非常严格，如果在选材方面过于仓促，那么简欧风格很容
                        易沦为简单的设计，也就是行业常说的“伪简欧”。用心地在创作中发挥简约而不简单、这样创造的风格才会散发出无敌的诱惑，让人心动。
                    </p>
                    <a href="" class="more">了解更多 &gt;</a>
                </div>
            </div>
            <div class="overflow zhx-box">
                <div class="float zhx-text text-2">
                    <h3>万众名府100㎡ <br/>半包 <br/>—</h3>
                    <p>
                        设计理念： <br/>设计理念: 田园风格的朴实是众多选择此风格装修者最青睐的一个特点，因为在喧哗的城市中，人们真的很想亲近自然，追求朴实的生活，于是
                        田园生活就应运而生啦！喜欢田园风格的人大部分都是低调的人，懂得生活，懂得生活来之不易！
                    </p>
                    <a href="" class="more">了解更多 &gt;</a>
                </div>
                <div class="float">
                    <img src="images/ty.png" alt=""/>
                    <img src="images/ty.jpg" alt=""/>
                </div>
            </div>
            <!-- 装修团队-->
            <div class="atitle tuanD">
                <h3 class="h3"><span>装修</span>&nbsp;团队</h3>
                <img class="more" src="images/more.png" alt=""/>
            </div>
            <div class="tuanD-main">
                <ul class="overflow">
                    <li class="float">
                        <img src="images/t.jpg" alt=""/>
                        <img src="images/t2.png" alt=""/>
                    </li>
                    <li class="float tuanD-text">
                        <h4>杭州品韵装饰设计工程 有限公司</h4>
                        <p>我们诞生于2014年一个阳光灿烂的日子。我们是一家专门从事住宅装饰、装修、设计、以及施工，公用建筑室内外装饰、装修设计与施工、环境设计与施工的公司。<br/>
                            壹设计机构 <br/>他们都是80后、90后，他们最懂80后90后。 <br/>以室内设计的角度，帮助你更好的去创造财富。
                        </p>
                        <a href="" class="more">了解更多+</a>
                    </li>
                    <li class="float">
                        <img src="images/t3.jpg" alt=""/>
                        <img src="images/t4.jpg" alt=""/>
                    </li>
                    <li class="float tuanD-text">
                        <h4>杭州蓝冠装饰设计有限公司</h4>
                        <p>杭州蓝冠装饰设计有限公司成立于2011年，专业从事住宅精装修、别墅、排屋精装修室内装饰设计施工。 我们的核心团队历经15年的磨练与深造，获得了丰富的经验与知识，得到了杭州万余户籍装修业主的认可，
                            在毛坯房室内精装修方面迅速发展，口碑相传的同时我们也贯彻公司上下，以打造杭州放心精装修公司为发展方向。
                        </p>
                        <a href="" class="more">了解更多+</a>
                    </li>
                </ul>
            </div>
            <!-- 装修攻略-->
            <div class="atitle tuanD">
                <h3 class="h3"><span>装修</span>&nbsp;攻略</h3>
                <img class="more" src="images/more.png" alt=""/>
            </div>
            <div class="gl-main">
                <div class="list-gl">
                    <ul class="overflow">
                        <li class="float"><img src="images/gl.jpg" alt=""/>
                            <span>卧室中式装修有几种植物最忌讳摆设呢？</span>
                        </li>
                        <li class="float"><img src="images/gl2.jpg" alt=""/>
                            <span>欧式风格美容院装修有几个注意细节？</span>
                        </li>
                        <li class="float"><img src="images/gl3.jpg" alt=""/>
                            <span>卧室装饰布置时有几个注意细节？</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="talking overflow">
                <div class="float">
                    <ul>
                        <li>213213123124213213232131232112 <time>4-15</time></li>
                        <li>213213123124213213232131232112 <time>4-15</time></li>
                        <li>213213123124213213232131232112 <time>4-15</time></li>
                        <li>213213123124213213232131232112 <time>4-15</time></li>
                        <li>213213123124213213232131232112 <time>4-15</time></li>
                        <li>213213123124213213232131232112 <time>4-15</time></li>
                    </ul>
                </div>
                <div class="float">
                    <ul>
                        <li>213213123124213213232131232112 <time>4-15</time></li>
                        <li>213213123124213213232131232112 <time>4-15</time></li>
                        <li>213213123124213213232131232112 <time>4-15</time></li>
                        <li>213213123124213213232131232112 <time>4-15</time></li>
                        <li>213213123124213213232131232112 <time>4-15</time></li>
                        <li>213213123124213213232131232112 <time>4-15</time></li>
                    </ul>
                </div>
            </div>

        </div>
    </section>
    <!-- 页尾-->
    <footer>
        <div class="mulu ">
            <div class="footer-lists float">
                <div class="storng">首页</div>
                <div class="storng">材料供应</div>
                <div>
                    <ul>
                        <li class="storng">石材加工</li>
                        <li>加工厂房</li>
                        <li>加工案例</li>
                    </ul>
                </div>
                <div>
                    <ul>
                        <li class="storng">装修设计</li>
                        <li>装修团队</li>
                        <li>装修案例</li>
                        <li>装修攻略</li>
                    </ul>
                </div>
                <div>
                    <ul>
                        <li class="storng">施工团队</li>
                        <li>施工团队</li>
                        <li>在建工地</li>
                    </ul>
                </div>
                <div>
                    <ul>
                        <li class="storng">会员中心</li>
                        <li>我的订单</li>
                    </ul>
                </div>
            </div>
            <div class="contact float">
                <h4 class="storng">联系我们</h4>
                <span>21312312312321</span><br/>
                <span>2132131232131231221312</span>
            </div>
        </div>
        <div class="icp">
            版权所有：老石汇有限公司&nbsp;&nbsp;&nbsp;浙ICP备13009078号-1
        </div>
    </footer>
</div>
</body>
</html>